<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>挑战我的PK</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<link rel="stylesheet" href="css/challenge.css" />
		<link rel="stylesheet" type="text/css" href="css/hehua.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="//res.qiaomukeji.com/js/chomoo-weixin.js?v=3"></script>
		<script type="text/javascript" src="js/moduls/islogin.js"></script>
		<script src="js/moduls/pk.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div class="top">
			<div class="top-logo">
			</div>
			<div class="top-theme">
			</div>
			<div class="top-title">
			</div>

			<div class="top-btnBack" onclick="history.go(-1);">
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-logo2">
			</div>
		</div>

		<div class="right_items">
			<div class="item rules">活动规则</div>
			<div class="item rank">排行榜</div>
		</div>
		<div class="content" style="opacity : 0">
			<!--<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="theme">
				<img src="img/theme.png" />
			</div>
			<div class="subTop">
				<div class="picture">
					<img src="img/title2.png" />
				</div>

			</div>
			<div class="back">
				<div class="backBtn">
					<a href="javascript:history.go(-1)"><img src="img/closeBtn.png" /></a>
				</div>

			</div>-->
			<div class="middlePath">

				<div class="title">
					<img src="img/challenge/challenge.png" alt="">
				</div>
				<div class="line">
					<img src="img/line.png" alt="">
				</div>
				<div class="middleContent">
					<div class="challenger">
						<div class="person" v-for="(pkMeUser,index) in pkMeUsers" :key="index">
							<div class="ownerImg">
								<img :src="pkMeUser.avatar" alt="">
							</div>
							<div class="infoWay">
								<div class="info">
									<span>{{pkMeUser.name}}</span>
									<span>{{pkMeUser.lotusNum}}荷花</span>
								</div>
								<div class="response">
									<div class="effect" v-if="seen[index]">
										<div class="btnItem accept" @click="accept(index)">接受</div>
										<div class="btnItem refuse" @click="refuse(index)">拒绝</div>
									</div>
									<div class="btnItem expired" v-else>已过期</div>

								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="line">
					<img src="img/line.png" alt="">
				</div>
			</div>

			<!--<div class="bottom-logo">
				<img src="img/bottom_logo2.png" />
			</div>-->
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '.content',
			data: {
				pkMeUsers: [],
				seen: []
			},
			methods: {
				accept(_index) {
					var t_rivaId = this.pkMeUsers[_index]["rivaId"];
					var t_fightId = this.pkMeUsers[_index]["fightId"];
					window.location.href = "answerQue.html?rivaId="+t_rivaId+"&fightId="+t_fightId;
				},

				refuse(_index) {
					//拒绝挑战
					var t_fightId = this.pkMeUsers[_index]["fightId"];
					refusePk(t_skey,t_fightId,function(res){
						window.location.reload();
					});
				}
			}
		})

		getPkMyInfo(t_skey, function(_res) {
			app.pkMeUsers = _res["data"];
			for(let i = 0; i < _res["data"].length; i++) {
				if(_res["data"][i].status == "已过期") {
					app.seen[i] = false;
				} else {
					app.seen[i] = true;
				}
			}
			
			$(".content").css("opacity",1)
		})
	</script>

</html>